<script setup>
import {reactive, ref} from "vue";

let progress1 = ref(0.5)
let showUp = ref(false);
let global = reactive({
  activeFile:{},
  fileList:[{
    name:'四川省失业登记表',
    id:1
  },{
    name:'居民身份证复印件',
    id:2
  },{
    name:'劳动关系解除合同',
    id:3
  }]
})

const triggerUploadFile = (x) => {
  document.getElementById('file').click()
  global.activeFile = x;
}
const uploadFile = () => {
  global.activeFile['showUp'] = true
  let time = setInterval(x=>{
    progress1.value += 0.01
    if (progress1.value >= 1) {
      global.activeFile['showUp'] = false
      clearInterval(time);
      progress1.value = 0;
    }
  },100)
}
</script>

<template>
<div class="event-ma">
  <div class="tit">您选择的事项<span>失业登记</span>需要提交的材料有：</div>
  <div class="ma-list" v-for="x in global.fileList">
    <div class="com">
      <div class="com-tit">
        <img src="../../assets/images/wenjian.png" class="icon" alt="">
        <span class="span">{{x.name}}</span>
      </div>
      <div class="yao">
        <span class="y1">四川省失业登记表中的户口性质不能是农村户口</span>
        <span class="y2 ">审核通过</span>
      </div>
      <div class="yao">
        <span class="y1">四川省失业登记表中的户口性质不能是农村户口</span>
        <span class="y3">审核不通过 原因：身份证已过期</span>
      </div>
      <div class="yao">四川省失业登记表中的户口性质不能是农村户口</div>
    </div>
  </div>
  <div class="opa">
    <div class="line">
      <q-linear-progress stripe size="10px" :value="progress1" />
    </div>
    <div class="btn"><q-icon name="file_upload" @click="triggerUploadFile"></q-icon>上传文件</div>
    <div class="btn"><q-icon name="send"></q-icon>提交办件</div>
  </div>
  <input type="file" id="file" @change="uploadFile" v-show="false">
</div>
</template>

<style scoped lang="scss">
.event-ma{
  width: calc(100% - 45px);
  margin-top: 10px;
  margin-left: 45px;
  min-height: 200px;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 10px;
  .tit{
    padding-bottom: 10px;
    span{
      font-weight: bold;
      color: #ff9800;
      padding: 0 3px;
    }
  }
  .ma-list{
    width: 100%;
    min-height: 40px;
    padding-left: 20px;
    border-bottom: 1px solid #e5e5e5;
    .com{
      padding-top: 8px;
      .com-tit{
        display: flex;
        padding-bottom: 10px;
        align-items: center;
        font-size: 18px;
      }
      .yao{
        padding-left: 30px;
        padding-bottom: 10px;
        .y2{
          padding-left: 10px;
          font-weight: bold;
          color: #26A69A;
        }
        .y3{
          padding-left: 10px;
          font-weight: bold;
          color: #c94a4a;
        }
      }
    }
    .icon{
      width: 20px;
      height: 20px;
      vertical-align: top;
    }
    .span{
      vertical-align: top;
      padding-left: 5px;
    }
  }
  .opa{
    display: flex;
    justify-content: end;
    padding-top: 20px;
    padding-bottom: 20px;
    .line{
      width: 300px;
      position: relative;
      top:7px
    }
    .btn{
      margin-left: 20px;
      cursor: pointer;
    }
    .btn:hover{
      color: #ff9800;
    }
  }
}
</style>
